<script setup>
import {MY_LIU_YAN_ROUTE} from "@/router/routes/liu/MyLiuYan.js";
import {onBeforeMount, ref} from 'vue'
import {getProductListRandomAPI} from "@/api/product.js";
import ProductItem from "@/components/ProductItem.vue";
import useProductStore from "@/store/modules/ProductStore.js";
import {PRODUCT_ROUTE} from "@/router/routes/product/product.js";
import {useRouter} from "vue-router";
import {getLiuPageAPI} from "@/api/liu.js";
import LiuItem from "@/views/liu/components/LiuItem.vue";

const router = useRouter()
const productStore = useProductStore()

// *******
// * 返回 *
// *******
const goBack = () => {
  router.back()
}

const goMyLiuYan = () => {
  router.push({name: MY_LIU_YAN_ROUTE})
}

// 商品列表
// const current = ref(0)
let next = 1
const pageSize = 10
const data = ref([]);
const loading = ref(false);
const finished = ref(false);
const error = ref(false);
onBeforeMount(async () => {
  // 异步更新数据
  loading.value = true
  const res = await getLiuPageAPI(next++, pageSize)
  loading.value = false
  if (!res) {
    error.value = true
    return
  }
  // current.value = res.current
  if (res.pageCnt === res.current || res.pageCnt === 0) {
    finished.value = true
  }
  data.value.push(...(res.data))
})
const onLoad = async () => {
  // 当前处于数据加载状态
  loading.value = true
  // 异步更新数据，分页获取用户留言
  const res = await getLiuPageAPI(next++, pageSize)
  // 数据加载状态结束
  loading.value = false
  // 用户留言获取失败
  if (!res) {
    error.value = true
    return
  }
  // 用户留言为空
  if (res.pageCnt === res.current || res.pageCnt === 0) {
    finished.value = true
  }
  // 用户留言获取成功，且不为空，加入页面展示的用户留言数据列表
  data.value.push(...(res.data))
  // productListFinished.value = true
};
const refreshing = ref(false);
const onRefresh = async () => {
  // 清空数据
  data.value = []
  // 重新加载数据
  next = 1
  finished.value = false
  // 异步更新数据
  loading.value = true
  const res = await getLiuPageAPI(next++, pageSize)
  loading.value = false
  refreshing.value = false
  if (!res) {
    error.value = true
    return
  }
  if (res.pageCnt === res.current || res.pageCnt === 0) {
    finished.value = true
  }
  data.value.push(...(res.data))
};
</script>

<template>
  <div class="liu-yan">
    <van-nav-bar
        :title="'留言'"
        left-text="返回"
        left-arrow fixed
        @click-left="goBack"
        right-text="我的留言"
        @click-right="goMyLiuYan"
        placeholder
    ></van-nav-bar>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
          v-model:loading="loading"
          v-model:error="error"
          :finished="finished"
          finished-text="没有更多了"
          error-text="请求失败，点击重新加载"
          @load="onLoad"
      >
        <div class="box-border" v-for="(liu, idx) in data">
          <LiuItem :liu="liu"></LiuItem>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<style scoped lang="scss">

</style>